<script setup>
import { ref } from 'vue';
import router from '@/router';
const currentTag = ref(1);
const handlerClick = (tag) => {
  currentTag.value = tag;
  router.push({ path: tag === 1 ? 'mine' : tag === 2 ? 'discover' : tag === 3 ? 'cloud' : 'video' })
}
</script>

<template>
  <div>
    <div class="header">
      <div class="list">
        <van-icon name="wap-nav" size="22" />
      </div>
      <div class="nav">
        <div :class="{ active: currentTag === 1 }" @click="handlerClick(1)">我的</div>
        <div :class="{ active: currentTag === 2 }" @click="handlerClick(2)">发现</div>
        <div :class="{ active: currentTag === 3 }" @click="handlerClick(3)">云村</div>
        <div :class="{ active: currentTag === 4 }" @click="handlerClick(4)">视频</div>
      </div>
      <div class="search">
        <van-icon name="search" size="22" />
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.header {
  display: flex;
  padding: 10px 10px 0;
  justify-content: space-between;

  .nav {
    display: flex;
    justify-content: space-around;
    width: 180px;
  }
}
</style>
